<template>
  <up-popup class="positionPopup" closeIconPos="top-right" :round="10" mode="bottom" :overlay="false" :show="show" @close="close" @open="openCallback">
    <view class="header">
      <view style="flex: 1;"></view>
      <up-icon :name="closePng" color="rgb(237 237 237)" size="23" @click="close"></up-icon>
    </view>
    <view class="content">
      <view class="searchList">
        <scroll-view :scroll-y="true" class="scroll-Y" >
         	<up-cell-group>
            <up-cell v-for="(res, index) in props.searchList" :key="res.id" isLink :rightIcon="MapIcons.arrowrightbold">
              <template #title>
                <up-text :text="res.cname?res.cname:res.caddress" @click="onSelectedClick(res)"></up-text>
              </template>
              <template #label>
                <up-text :text="res.cname?res.caddress:''" @click="onSelectedClick(res)"></up-text>
              </template>
              <template #value>
                <up-icon :name="MapIcons.errorcircle" color="#2979ff" size="20"  @click="onrealTimeInfoClick(res)"></up-icon>
              </template>
            </up-cell>
          </up-cell-group>
        </scroll-view>
      </view>
    </view>
  </up-popup>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { MapIcons } from '@/utils/base64-icons'
import closePng from '@/static/images/close.png'

// 创建响应式数据
const show = ref(false)

const props = defineProps<{
  searchList: any
}>()

const emit = defineEmits<{
  (e: 'click', data: any): void
  (e: 'tclick', data: any): void
}>()

// 定义方法
function open() {
  show.value = true
}

function openCallback() {
}

function close() {
  show.value = false
}

function onSelectedClick(data: any) {
  emit('click', data)
}

function onrealTimeInfoClick(data: any){
  emit('tclick', data)
}

defineExpose({
  open,
  close,
})
</script>

<style lang="scss" scoped>
.positionPopup  .header {
  background-color: #7099B4;
  border-radius: 10rpx 10rpx 0 0;
  padding: 20rpx 20rpx;
  display: flex;
}
.positionPopup .content {
  padding: 0rpx 20rpx 20rpx 20rpx;
  background-color: #ffffff;
  border-radius: 0px;
  overflow: hidden;
}
.searchList {
  height: 35vh;
  overflow-y: auto;
}
</style>
